
<template>
  <div>
      <div class="header" >
         <div class="category">{{state.movieTypeStr}}</div>
         <router-link v-if="state.movieTypeStr" :to="'/more/' + state.movieType">
            <div class="more">查看更多></div>
         </router-link>
      </div>
      <div class="list" v-if="movieList" >
         <Music v-for="(item, index) in movieList" :movie="item" :key="index"/>
      </div>
  </div>
</template>

<script>
import Music from '@/components/Music.vue'
//import Swipper from '@/components/Swipper.vue'
//import {reactive} from 'vue'
//提问：为啥第一行 必须不能加 大括号， 第二行必须加上大括号！！！[耶]
//回答：第一个是export default  第二个是export， 你把第一个改成 export 就可以加上括号了
import {reactive} from 'vue'
import {useStore} from 'vuex'

export default{
	name: "MusicList",
	components:{
		Music
	},
	props:{
	  movieList: Array,
	  movieType: Number //数组下标
	},
	setup(props) {
	  const categoryList = useStore().state.categoryList
	 
	  const state = reactive({
	      movieTypeStr: categoryList[props.movieType],
		  movieType: props.movieType
	  });
	  return {state}
	}
}
</script>


<style scoped>
.header {
  display: flex;
  justify-content: space-between;

  font-size: 0.5rem;
  margin: 0.1rem 0.2rem;
}
.list {
  display: flex;
  overflow-x: scroll;
}
</style>